<template>
  <!-- <v-container> -->
  <v-container
  class="green lighten-2"
  style="position:fixed;top:0px;bottom:0px;left:0px;rigth:0px;overflow:scroll;"
  >
    <!-- 返回按钮、题数 -->
    <v-row class="mt-n3">
      <v-col>
        <v-btn :to="{name:'home'}" class="mx-2" elevation="0" fab outlined x-small color="white">
          <v-icon color="white">mdi-keyboard-backspace</v-icon>
        </v-btn>
      </v-col>
      <v-col>
        <span class="d-flex justify-center" style="color:white;font-size:15px;">第8题/共10题</span>
      </v-col>
      <v-col></v-col>
    </v-row>
    <!-- 我的头像 -->
    <span style="border-radius:50px;position:fixed;top:70px;left:-75px;display:inline-block;width:150px;height:70px;" class="blue"></span>
    <span style="position:fixed;top:77px;left:15px;">
      <v-avatar size="55">
        <img src="https://cdn.vuetifyjs.com/images/lists/2.jpg" alt="John" />
      </v-avatar>
    </span>
     <!-- 倒计时 -->
    <span style="position:fixed;top:77px;left:150px;">
      <v-progress-circular
      :rotate="200"
      :value="20"
      :size="60"
      :width="5"
      color="red"
      >
        {{ 2 }}
      </v-progress-circular>
    </span>
     <!-- 对手的头像 -->
    <span style="border-radius:50px;position:fixed;top:70px;right:-75px;display:inline-block;width:150px;height:70px;" class="yellow"></span>
    <span style="position:fixed;top:77px;right:15px;">
      <v-avatar size="55">
        <img src="https://cdn.vuetifyjs.com/images/lists/ali.png" alt="Ali" />
      </v-avatar>
    </span>
    <!-- 我的信息 -->
    <span style="position:fixed;top:150px;left:18px;font-size:17px;">我</span>
    <span style="position:fixed;top:175px;left:18px;font-size:22px;color:blue;">600</span>
    <!-- 对手的信息 -->
    <span style="position:fixed;top:150px;right:18px;font-size:17px;">Ali</span>
    <span style="position:fixed;top:175px;right:18px;font-size:22px;color:yellow;">440</span>
    <!-- 题目 -->
    <span style="position:fixed;top:230px;left:0px;display:inline-block;width:370px;height:40px;">
      <h4 class="d-flex justify-center" style="color:white;">世界环境日是每年的什么时候？</h4>
    </span>
    <!-- 选项 -->
    <span style="position:fixed;bottom:30px;left:85px;display:inline-block;width:360px;">
      <v-btn rounded color="white" width="190" height="50">5月6日</v-btn><br><br>
      <v-btn rounded color="red" width="190" height="50">5月5日</v-btn><br><br>
      <v-btn rounded color="green" width="190" height="50">6月5日</v-btn><br><br>
      <v-btn rounded color="white" width="190" height="50">6月6日</v-btn>
    </span>
    <!-- 我的得分条 -->
    <span style="border-radius:30px;position:fixed;bottom:10px;left:15px;display:inline-block;width:15px;height:500px;" class="blue lighten-4"></span>
    <span style="border-radius:30px;position:fixed;bottom:10px;left:15px;display:inline-block;width:15px;height:300px;" class="blue"></span>
    <!-- 对手的得分条 -->
    <span style="border-radius:30px;position:fixed;bottom:10px;right:15px;display:inline-block;width:15px;height:500px;" class="yellow lighten-4"></span>
    <span style="border-radius:30px;position:fixed;bottom:10px;right:15px;display:inline-block;width:15px;height:220px;" class="yellow"></span>
    <!-- 我的答题头像 -->
    <span style="position:fixed;top:580px;left:45px;">
      <v-avatar size="25">
        <img src="https://cdn.vuetifyjs.com/images/lists/2.jpg" alt="John" />
      </v-avatar>
    </span>
    <!-- 对手的答题头像 -->
    <span style="position:fixed;top:505px;right:45px;">
      <v-avatar size="25">
        <img src="https://cdn.vuetifyjs.com/images/lists/ali.png" alt="Ali" />
      </v-avatar>
    </span>
  </v-container>
</template>

<script>
export default {
  data () {
    return {
    }
  },
}
</script>

<style scoped>
</style>